<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/static-common/style/tb.js/dialog_29a9417.css,/tb/static-common/lib/tbui/style/all_1888f28.css" />
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/_/index_7712603.css,/tb/_/search_2e2269a.css" />
		<link href="../wx/css/ddSecond.css" type="text/css" rel="stylesheet"/>
		<link rel="stylesheet" href="../wx/css/a.css" type="text/css" />
		<script type="text/javascript" src="../wx/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="../wx/js/script.js"></script>	
		
		<title>系统设置</title>
		
		<style>
		body {
			width: 100%;
			height: 100%;
			background: url(../wx/images/bg1.png) no-repeat center fixed;
			-webkit-background-size: 100% 100%;
			font-family: "微软雅黑";
		}
		.bind{
			margin-left: 25px;
		    color: #fff;
		    text-align: left;
		    border-bottom: 1px dotted #a5c0d5;
		    font-size: 15px;
		    height: 210px;
		    width: 80%;margin-top:20px
		}
		.set{
			margin-left: 35px;
		    color: #fff;
		    margin-top:20px;
		    text-align: left;
		    border-bottom: 1px dotted #a5c0d5;
		    font-size: 15px;
		    height: 80px;
		    width: 80%;
		}
		.bottom{
			margin-left: 25px;
		    color: #fff;
		    margin-top:20px;
		    text-align: left;
		    font-size: 15px;
		    height: 80px;
		    width: 80%;
		}
		input{
			background: -webkit-linear-gradient(top, #25bcf6, #155891);
		    background: -o-linear-gradient(top, #fff, #0000ff);
		    border-radius: 8px;
		    width: 66px;
		    height: 26px;
		    border: 1px solid #fff;
		    color: #fff;
		    font-size: 14px;
		    float: right;
		}
		.clear{
			background: none;
		    border-radius: 8px;
		    width: 66px;
		    height: 26px;
		    border: 1px solid #fff;
		    color: #fff;
		    float: right;
		    margin-top:-40px
		}
		.center{
			color:#a5c0d5;
			font-size:12px;
			margin-top:25px
		}
		.set-center{
			color:#a5c0d5;
			margin-top:15px
		}
		.set-center p{
			font-size: 13px;
		}
		.center span{
			padding-left: 30px;
		}
		.center-right{
			margin-left: 34%;
		}
		.center-left p{
			line-height:30px;
			font-size: 13px;
		}
		.center-right p{
			line-height:30px;
			font-size: 13px;
		}
		.active{
		  background-color: #204d74;
		  color:#fff!important;
		}
		#btn-alarm-on{margin-right: -5px;}
		</style>
		<script type="text/javascript">
			$(document).ready(function (){
				$("#unBind").click(function (){
					$.ajax({
						type : "POST",
						url : "UnBind/unBind",
						dataType : "json",
						data : {
							OpenId:$("#OpenId").val()
						},
						success : function(data) {
							if(data!=null){
								$("#unbind-container").show();
								$("#all").hide();
							}else{
								alert("返回信息为空!");
							}
						},
						error : function(data) {
							alert("录制信息失败！");
						}
					});
				})
			})
		</script>
	</head>

	<body>
		<div class="container" id="unbind-container" hidden>
		    <p class="lead"><h4 style="color: #fff;">您已经成功解除设备绑定,如需重新绑定,请扫描设备二维码</h4></p>
		</div>
	
		<div id="all" style="position:absolute;top: 25px;left:15px;width: 90%;height:480px;text-align: center; color: #fff;background: url(../wx/images/chongzhibg.png) no-repeat; background-size:100% 480px">
		<div class="bind">
			<span style="font-size: 16px;">终端绑定信息</span>
			<input type="hidden" value="${openId }" id="OpenId"/>
			<input type="button" value="解绑" id="unBind">
			<div class="center">
				<div style="float: left;" class="center-left">
					<p>终端设备ID：</p>
					<p>设备型号：</p>
					<p>IMEI号：</p>
					<p>ICCID号：</p>
					<p>软件版本：</p>
				</div>
				<div class="center-right">
					<p>${device.DeviceId }</p>
					<p>${device.Model }</p>
					<p>${device.IMEI}</p>
					<p>${device.ICCID }</p>
					<p>${device.SoftVersion }</p>
				</div>
			</div>
		</div>
		<div class="set">
			<span>用户设置</span>
			<div class="set-center">
			<div style="float: left;" class="center-left">
					<p>车辆告警：</p>
				</div>
				
				<div class="center-right" style="z-index: 222;overflow:hidden;text-align: right;">
					<!--<input  type="radio" name="radio" id="use" value="启用" checked>
					<input  type="radio" name="radio" id="stop" value="禁用">-->
						 <button type="button" id="btn-alarm-on" class="btn active" style="line-height: 9px;">On</button>
                        <button type="button" id="btn-alarm-off" class="btn" style="line-height: 9px;">Off</button>
				</div>
			</div>
		</div>
		<div class="bottom">
			<span>地址信息</span>
			<div class="set-center" style="font-size: 13px;">
			<p>历史信息</p>
			</div>
			<input type="button" value="清除" class="clear">
		</div>
		
		</div>
		<script>
			
//$(".btn").click(function(){
//	$(this).siblings().removeClass("active");
//	$(this).addClass("active");
//})
		</script>
	</body>
</html>